<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta username='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <script src="./jq/jquery.js"></script>
    <style>
        #box {
            /* width: 403px; */
            height: 252px;
            border-bottom: 1px solid #ccc;
            position: relative;
            display: flex;
            flex-direction: column;

        }

        #box span {
            /* float: left; */
            margin-top: 10px;
        }

        #box #btn {
            position: absolute;
            left: 0;
            bottom: 20px;
        }

        table {
            width: 480px;
            height: auto;
            /* border: 1px solid red; */
            /* border-collapse: collapse; */
            /* border-spacing: 0; */
            margin-top: 20px
        }

        table thead tr>td {
            width: 480px;
            height: 40px;
            border: 1px solid red;
            text-align: center;
            line-height: 40px;
        }

        table tbody tr>td {
            width: 480px;
            height: 40px;
            border: 1px solid red;
            text-align: center;
            line-height: 40px;
        }

        table tbody tr:nth-child(2n) {
            background: green
        }

        table tbody tr:nth-child(2n+1) {
            background: #ccc
        }

        .liebie {
            width: 403px;
            height: 42px;
            border-bottom: 1px solid #ccc;
            padding-top: 20px;
        }

        .liebie>a {
            margin-right: 16px;
        }
    </style>
</head>

<body>
    <div id="box">
        <span>商品名称：<input type="text" id="inp1" name="input"> </span>
        <span>商品类别：<select name="" id="xuanze">
                <option data-id="1">休闲零食</option>
                <option data-id="2">饮料酒水</option>
                <option data-id="3">卤味熟食</option>
                <option data-id="4">优选水果</option>
            </select>
        </span>
        <span>商品原价：<input type="text" id="inp2"></span>
        <span>商品现价：<input type="text" id="inp3"> </span>
        <span>商品数量：<input type="text" id="inp4">
        </span><br>
        <span>是否标红: <input type="radio" name="gender" id="on">是 <input type="radio" name="gender" id="off"> 否</span>
        <div id="btn">
            <input type="submit" value="提交信息">
        </div>
    </div>

    <div class="liebie">
        <a href="javascript:;" class="all">全部</a>
        <a href="javascript:;" class="fut">优选水果</a>
        <a href="javascript:;" class="fut1">卤味熟食</a>
        <a href="javascript:;" class="fut2">饮料酒水</a>
        <a href="javascript:;" class="fut3">休闲零食</a>
    </div>

    <table>
        <thead>
            <tr>
                <td>商品名称1111</td>
                <td>商品类别</td>
                <td>原价</td>
                <td>现价</td>
                <td>库存</td>
                <td>是否标红</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</body>
<html>
<script>
    var inp1 = document.getElementById('inp1')
    var inp2 = document.getElementById('inp2')
    var inp3 = document.getElementById('inp3')
    var inp4 = document.getElementById('inp4')
    var btn = document.getElementById('btn')
    var xuanze = document.getElementById('xuanze')
    var tbody = document.getElementById('tbody')

    inp1.onblur = function () { //给inp1添加失焦事件
        if (inp1.value == '') { //判断如果inp1的值为空则弹窗显示
            alert('商品名不能为空')
            return false //返回值flase则不进行下一步
        }
    }
    xuanze.onblur = function () {
        if (xuanze.value == '') {
            alert('商品类别不能为空')
            return false
        }
    }
    inp2.onblur = function () { //给inp2添加失焦事件
        if (inp2.value == '') { //判断如果inp2的值为空则弹窗显示
            alert('商品价格不能为空')
            return false //返回值flase则不进行下一步
        }

        var reg = /^\d{2,4}$/ //正则表达验证是否是数字
        if (!reg.test(this.value)) { //判断值不为数字则弹窗显示
            alert('商品价格填写不规范');
            return false //返回值flase则不进行下一步
        }
        // console.log(inp2.value);
    }
    inp3.onblur = function () {
        if (inp3.value == '') {
            alert('商品价格不能为空')
            return false
        }
        var reg = /^\d{2,4}$/
        if (!reg.test(this.value)) {
            alert('商品价格填写不规范');
        }
    }
    inp4.onblur = function () {
        if (inp4.value == '') {
            alert('商品数量不能为空')
            return false
        }
        var reg = /^\d{2,4}$/
        if (!reg.test(this.value)) {
            alert('商品价格填写不规范');
        }
    }
    //删除当前这行
    function delet() {
        $('#tbody').click(function (e) { //事件委托
            if (e.target.innerHTML == '删除') {
                $(e.target).parent().remove()
                let str;
                let res = JSON.parse(localStorage.getItem("data"))
                let pan = $(e.target).prev().prev().prev().prev().prev().prev().text()
                console.log(pan)
                let kk = res.filter(v => {
                    return !(v.name === pan)
                })
                // console.log(kk)
                localStorage.setItem('data',JSON.stringify(kk))
            }
        })
    }
    //点击显示优选水果
    $('.fut').click(function () {
        let res = JSON.parse(localStorage.getItem("data"))
        let suo = $(this).text()
        let pop = res.filter(v => { //筛选同一类的商品
            return v.type === suo
        })
        pop.reverse(); //数组反转，为了将最新数据显示在最上方
        // console.log(pop)
        let str = "";
        pop.forEach(v => {
            str += `<tr>
                <td style="color:${v.color}">${v.name}</td>
                <td>${v.type}</td>
                <td>${v.before}</td>
                <td>${v.now}</td>
                <td>${v.num}</td>
                <td>${v.on}</td>
                <td>删除</td>
            </tr>`
        });
        tbody.innerHTML = str;
        delet();
    })
    //点击卤味熟食
    $('.fut1').click(function () {
        let res = JSON.parse(localStorage.getItem("data"))
        let suo = $(this).text()
        let pop = res.filter(v => { //筛选同一类的商品
            return v.type === suo
        })
        pop.reverse(); //数组反转，为了将最新数据显示在最上方
        // console.log(pop)
        let str = "";
        pop.forEach(v => {
            str += `<tr>
                <td style="color:${v.color}">${v.name}</td>
                <td>${v.type}</td>
                <td>${v.before}</td>
                <td>${v.now}</td>
                <td>${v.num}</td>
                <td>${v.on}</td>
                <td>删除</td>
            </tr>`
        });
        tbody.innerHTML = str;
        delet();
    })
    //点击饮料酒水
    $('.fut2').click(function () {
        let res = JSON.parse(localStorage.getItem("data"))
        let suo = $(this).text()
        let pop = res.filter(v => { //筛选同一类的商品
            return v.type === suo
        })
        pop.reverse(); //数组反转，为了将最新数据显示在最上方
        // console.log(pop)
        let str = "";
        pop.forEach(v => {
            str += `<tr>
                <td style="color:${v.color}">${v.name}</td>
                <td>${v.type}</td>
                <td>${v.before}</td>
                <td>${v.now}</td>
                <td>${v.num}</td>
                <td>${v.on}</td>
                <td>删除</td>
            </tr>`
        });
        tbody.innerHTML = str;
        delet();
    })
    //点击休闲零食
    $('.fut3').click(function () {
        let res = JSON.parse(localStorage.getItem("data"))
        let suo = $(this).text()
        let pop = res.filter(v => { //筛选同一类的商品
            return v.type === suo
        })
        pop.reverse(); //数组反转，为了将最新数据显示在最上方
        // console.log(pop)
        let str = "";
        pop.forEach(v => {
            str += `<tr>
                <td style="color:${v.color}">${v.name}</td>
                <td>${v.type}</td>
                <td>${v.before}</td>
                <td>${v.now}</td>
                <td>${v.num}</td>
                <td>${v.on}</td>
                <td>删除</td>
            </tr>`
        });
        tbody.innerHTML = str;
        delet();
    })
    //点击显示全部
    $('.all').click(function () {
        let res = JSON.parse(localStorage.getItem("data"))
        res.reverse() //获取数据
        let one = res.filter(s=>{//筛选优选水果
            return s.type === "优选水果"
        })
       let a= [one[0],one[1]]//两条数据
        let two = res.filter(s=>{//筛选卤味熟食
            return s.type === "卤味熟食"
        })
        let b =[two[0],two[1]]//两条数据
        let three = res.filter(s=>{//筛选饮料酒水
            return s.type === "饮料酒水"
        })
        let c =[three[0],three[1]]//两条数据
        let four = res.filter(s=>{//筛选休闲零食
            return s.type === "休闲零食"
        })
        let d =[four[0],four[1]]//两条数据
        let tatoal = a.concat(b).concat(c).concat(d)
        // console.log(tatoal)
        let str = "";
        tatoal.forEach(v => {
            str += `<tr>
                <td style="color:${v.color}">${v.name}</td>
                <td>${v.type}</td>
                <td>${v.before}</td>
                <td>${v.now}</td>
                <td>${v.num}</td>
                <td>${v.on}</td>
                <td>删除</td>
            </tr>`
        });
        
        tbody.innerHTML = str;
        delet();

    })
    $('#btn input').click(function () {
        if (inp1.value == '' || inp2.value == '' || inp2.value == '' || inp3.value == '' || inp4.value == '' ||
            xuanze.value == '') {
            alert('内容不能为空')
            return false
        }
        let inp1s = $('#inp1').val() //商品名称
        let inp2s = $('#inp2').val() //商品原价
        let inp3s = $('#inp3').val() //商品现价
        let inp4s = $('#inp4').val() //商品数量
        let inp5s = document.querySelector('#xuanze').value //下拉框的值
        let inp6s = $('#on').prop('checked') //是
        let inp7s = $('#off').prop('checked') //否
        let inp8s;
        let inp9s;
        if (inp6s == true) {
            inp8s = inp6s;
            inp9s = "red"
        } else {
            inp8s = false;
            inp9s = "black"
        }
        let res = localStorage.getItem('data')
        let obj = { //创建对象储存每条数据
            name: inp1s,
            before: inp2s,
            now: inp3s,
            num: inp4s,
            type: inp5s,
            on: inp8s,
            color: inp9s
        }
        if (!res) {
            localStorage.setItem('data', JSON.stringify([obj])) //判断之前有没有数据
        } else {
            let add = JSON.parse(res)
            add.push(obj) //如果之前有就往里添加
            localStorage.setItem('data', JSON.stringify(add))
        }
        inp1.value = '' //提交之后inp1值为空
        inp2.value = ''
        inp3.value = ''
        inp4.value = ''
        xuanze.value = ''
    })
</script>